<template>
  <van-nav-bar
    title="登录"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.back('/');
      }
    "
  />

  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="dengluFrom.username"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ pattern, message: '请填写手机号' }]"
      />
      <van-field
        v-model="dengluFrom.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ pattern, message: '请填写密码' }]"
      />

      <button @click="btn">验证码</button>
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit" @click="dl">
        登录
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { dengluApi } from "@/api/api";
import { reactive } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
let router = new useRouter();
let dengluFrom = reactive({
  username: "",
  password: "",
});
let dl = () => {
  dengluApi(dengluFrom.username, dengluFrom.password).then((res) => {
    console.log("注册", res);
    if (res.data.code == 0) {
      showToast({
        message: "登录成功",
        type: "success",
        duration: "2000",
      });
      router.push("/demo4");
      localStorage.setItem("token", res.data.data.token);
      localStorage.setItem("username", res.data.data.username);
    } else {
      showToast({
        message: "登录失败",
        type: "fail",
        duration: "2000",
      });
    }
  });
};
let btn=()=>{
  let time = 60;
  let t1 = setInterval(() => {
    time--;
    btn.innerHTML = `倒计时${time}秒`;
    console.log('验证码');
    if (time === 0) {
      clearInterval(t1);
      btn.innerHTML = `重新获取`;
    }
  },1000);
}
  

</script>

<style lang="scss" scoped>
</style>